<template>
  <view class="app-container">
    <view style="height: 50px" class="bg-white flex items-center">
      <up-dropdown>
        <up-dropdown-item
          v-model="query.status"
          title="状态"
          :options="options1"
          @change="handleStatusChange"
        ></up-dropdown-item>
        <up-dropdown-item
          v-model="query.type"
          title="类型"
          :options="options2"
          @change="handleTypeChange"
        ></up-dropdown-item>
      </up-dropdown>
    </view>
    <view class="flex-1">
      <scroll-view
        scroll-y
        @scrolltolower="onScrolltolower"
        :style="{ height: heightStyle }"
      >
        <view class="p-20">
          <template v-if="list.length">
            <view
              class="my-card mb-20"
              v-for="(item, index) in list"
              :key="index"
              @click="handleToDetail(item)"
            >
              <view class="flex justify-between items-center">
                <view>
                  <u-text :text="item.code" bold></u-text>
                </view>
                <view>
                  <u-text
                    :text="formatStatus(item.status)"
                    type="info"
                  ></u-text>
                </view>
              </view>
              <u-gap height="10"></u-gap>
              <view class="field">
                <view class="label">申请时间</view>
                <view class="value">{{ item.created_at }}</view>
              </view>
              <u-gap height="10"></u-gap>
              <view class="field">
                <view class="label">退款类型</view>
                <view class="value">{{ formatType(item.type) }}</view>
              </view>
              <u-gap height="10"></u-gap>
              <view class="field">
                <view class="label">退款理由</view>
                <view class="value">{{ formatReason(item.reason) }}</view>
              </view>
              <u-gap height="10"></u-gap>
              <view @click.stop>
                <u-album
                  :maxCount="3"
                  :singleSize="100"
                  :multipleSize="100"
                  lazy-load
                  :urls="[...item.order.lines.map((i) => i.product.image_url)]"
                ></u-album>
              </view>
              <u-gap height="10"></u-gap>
              <u-line height="1"></u-line>
              <u-gap height="10"></u-gap>
              <view class="field">
                <view class="label">支付状态</view>
                <view class="value flex-1 flex justify-between items-center">
                  <text style="font-weight: bold; color: #e54746">
                    {{ formatOrderStatus(item.order.status) }}
                  </text>
                  <u-icon name="arrow-right"></u-icon>
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <my-empty text="暂无数据"></my-empty>
          </template>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { onReady, onShow } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import { useStore } from "vuex";

const store = useStore();

const query = reactive({
  page: 1,
  size: 10,
  status: "",
  type: "",
});

const list = ref([]);

const pageTotal = ref(0);

let heightStyle = "";

// #ifndef H5
heightStyle = `calc(100vh - 60px)`;
// #endif

// #ifdef H5
heightStyle = `calc(100vh - 94px)`;
// #endif

const options1 = [
  { label: "全部", value: "" },
  { label: "等待审核处理", value: "pending" },
  { label: "同意", value: "pass" },
  { label: "拒绝", value: "reject" },
  { label: "已完成", value: "completed" },
  { label: "已取消", value: "canceled" },
];

const options2 = [
  { label: "全部", value: "" },
  { label: "退货退款", value: "return" },
  { label: "仅退款", value: "refund" },
  { label: "换货", value: "replace" },
  { label: "补发商品", value: "reissue" },
];

const options3 = [
  { label: "商品质量问题", value: 1 },
  { label: "商品与页面描述不符", value: 2 },
  { label: "商品破损/包装问题", value: 3 },
  { label: "少件/未收到货", value: 4 },
  { label: "发错货", value: 5 },
  { label: "价格问题", value: 6 },
  { label: "假冒品牌", value: 7 },
  { label: "其他原因", value: 8 },
];

const orderPayOptions = [
  { name: "待支付", value: "pending" },
  { name: "已支付", value: "paid" },
  { name: "已发货", value: "express" },
  { name: "已完成", value: "completed" },
  { name: "已取消", value: "canceled" },
];

function formatStatus(status) {
  const c = options1.find((i) => i.value == status);
  if (c) {
    return c.label;
  }
  return "";
}

function formatType(type) {
  const c = options2.find((i) => i.value == type);
  if (c) {
    return c.label;
  }
  return "";
}

function formatReason(reason) {
  const c = options3.find((i) => i.value == reason);
  if (c) {
    return c.label;
  }
  return "";
}

function formatOrderStatus(status) {
  const c = orderPayOptions.find((i) => i.value == status);
  if (c) {
    return c.name;
  }
  return "";
}

function onScrolltolower() {
  if (query.page < pageTotal.value) {
    query.page += 1;
    getList(true);
  }
}

function handleStatusChange(e) {
  query.page = 1;
  getList();
}

function handleTypeChange(e) {
  query.page = 1;
  getList();
}

async function getList(isConcat = false) {
  const response = await store.dispatch("fetchAftercareList", query);
  if (response) {
    if (isConcat) {
      list.value = list.value.concat(response.records);
    } else {
      list.value = response.records;
    }
    pageTotal.value = response.page_total;
  }
}

function handleToDetail(item) {
  uni.$u.route({
    url: "/pages/order/aftercare/detail",
    params: {
      id: item.id,
    },
  });
}

onShow(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.field {
  display: flex;

  .label {
    width: 6em;
    color: $u-info;
  }
}
</style>
